function categroy() {
 let navAs = document.querySelectorAll('nav input');
 //console.log(navAs);
 navAs[0].style.color = '#010101';

 /* 点击搜索框 跳转到搜索页面 */
 $('header input').click(function() {
  window.location.href = 'search.html';
 });

 /* 将获取到的商品,分类展示到页面上 */
 function f() {
  $.get(categoryList, {}, res => {
   console.log(res);
   //console.log(res.info[0].categoryName);

   let html = res.info
    .map(
     v =>
      `
			<li> ${v.categoryName}</li>
			`
    )
    .join('');
   $('.pinLei ul').html(html);

   /* 页面加载完成直接将默认的类别的商品信息展示到页面上 */
   let obj = res.info[0].classList;
   let html1 = obj
    .map(
     v =>
      `<div class="pL-s-r-title">
						<span></span>
						<p>${v.className}</p>
						<span></span>
					</div>
					<div class="pL-s-r-cont">
					
					</div>
						`
    )
    .join('');
   document.querySelector('#pL-s-r-cont').innerHTML = html1;
   //console.log(document.querySelectorAll('.s-r-title'))
   let cont = document.querySelectorAll('.pL-s-r-cont');
   for (let i = 0; i < cont.length; i++) {
    for (let j = 0; j < obj[i].kindList.length; j++) {
     cont[i].innerHTML += `
						<a href="#">
					<dl>
						<dt>
							<img src="${obj[i].kindList[j].imgUrl}" alt="">	
						</dt>
						<dd>
							<p>${obj[i].kindList[j].kindName}</p>
						</dd>
					</dl>	
						</a>				
						`;
    }
   }

   /* 每次点击 将对应的类别商品信息长展示页面上 */
   // console.log(res.info[0].classList[0].className);
   $('.pinLei li').click(function() {
    // console.log($(this).index());
    // console.log(res.info[$(this).index()]);
    // console.log(res.info[$(this).index()].classList);

    let obj = res.info[$(this).index()].classList;
    let html1 = obj
     .map(
      v =>
       `<div class="pL-s-r-title">
							<span></span>
							<p>${v.className}</p>
							<span></span>
						</div>
						<div class="pL-s-r-cont">
						
						</div>
							`
     )
     .join('');
    document.querySelector('#pL-s-r-cont').innerHTML = html1;
    //console.log(document.querySelectorAll('.s-r-title'))

    let cont = document.querySelectorAll('.pL-s-r-cont');
    //console.log(res.info[$(this).index()].classList[$(this).index()].kindList);
    for (let i = 0; i < cont.length; i++) {
     for (let j = 0; j < obj[i].kindList.length; j++) {
      cont[i].innerHTML += `
						<a href="#">
							
						<dl>
							<dt>
								<img src="${obj[i].kindList[j].imgUrl}" alt="">
							</dt>
							<dd>
								<p>${obj[i].kindList[j].kindName}</p>
							</dd>
						</dl>	
						</a>				
						`;
     }
    }
   });
   pinLeiStyle();
  });
 }
 f();

 /* 品类和品牌馆切换 */
 navAs[0].onclick = function() {
  document.querySelector('#pinPai').style.display = 'none';
  document.querySelector('#pinLei').style.display = 'block';
  $(this)
   .css({
    color: '#010101',
   })
   .siblings()
   .css({
    color: '#999',
   });
 };

 /* 品类页面 */
 function pinLeiStyle() {
  $('.pinLei li')
   .eq(0)
   .css({
    color: '#010101',
    'font-size': '0.26rem',
    'border-left': '0.10rem solid #101010',
   })
   .siblings()
   .css({
    color: '#999',
    'font-size': '0.23rem',
    'border-left': '0',
   });

  $('.pinLei li').click(function() {
   $(this)
    .css({
     color: '#010101',
     'font-size': '0.26rem',
     'border-left': '0.10rem solid #101010',
    })
    .siblings()
    .css({
     color: '#999',
     'font-size': '0.23rem',
     'border-left': '0',
    });
  });
 }

 /* 品类和品牌馆切换 */
 navAs[1].onclick = function() {
  document.querySelector('#pinLei').style.display = 'none';
  document.querySelector('#pinPai').style.display = 'block';
  $(this)
   .css({
    color: '#010101',
   })
   .siblings()
   .css({
    color: '#999',
   });
  pinPaiStyle();

  $.get(
   findAllBrand,
   {
    popular: '热门',
   },
   res => {
    console.log(res.info);
    let html = res.info
     .map(
      v =>
       `
				<div class="pP-s-r-c-img">
					<a href="jump.html?brandId=${v.brandId}">
					<img src="${v.brandLogoUrl}">
					
					</a>
				</div>
				`
     )
     .join('');
    $('#pinPai .pP-s-r-cont').html(html);
   }
  );
 };
}

/* 品牌馆页面 */

// function pinPaiStyle() {
// 	//	console.log($('.pinPai li').eq(0));
// 	$('.pinPai  li').eq(0).css({
// 		'color': '#010101',
// 		'font-size': '0.26rem',
// 		'border-left': '0.10rem solid #101010'
// 	}).siblings().css({
// 		'font-size': '0.23rem',
// 		'color': '#999',
// 		'border-left': '0'
// 	});
// 	$('.pinPai  li').click(function() {
// 		console.log($(this).index());

// 		$(this).css({
// 			'font-size': '0.26rem',
// 			'color': '#010101',
// 			'border-left': '0.10rem solid #101010'
// 		}).siblings().css({
// 			'font-size': '0.23rem',
// 			'color': '#999',
// 			'border-left': '0'
// 		})

// 		/* 根据点击的类别请求不同的数据,并显示到页面上 */
// 		switch ($(this).index()) {
// 			case 0:
// 				$.get(showBrandByPopular, {

// 				}, res => {
// 					console.log(res.info);
// 					let html = res.info.map(v =>
// 						`
// 						<div class="pP-s-r-c-img">
// 							<a href="#">
// 							<img src="${v.brandLogoUrl}">

// 							</a>
// 						</div>
// 						`
// 					).join('');
// 					$('#pinPai .pP-s-r-cont').html(html);
// 				})
// 				break;
// 			case 1:
// 				$.get(findAllBrand, {

// 				}, res => {
// 					console.log(res.info);
// 					let html = res.info.map(v =>
// 						`
// 							<div class="pP-s-r-c-img">
// 								<a href="#">
// 							<img src="${v.brandLogoUrl}">

// 								</a>
// 							</div>
// 							`
// 					).join('');
// 					$('#pinPai .pP-s-r-cont').html(html);
// 				})
// 				break;

// 				/* 需要对商品进行分类 */
// 			case 2:
// 				$.get(showBrandByCategory, {

// 				}, res => {
// 					console.log(res.info);
// 					let html = res.info.map(v =>
// 						`
// 							<div class="pP-s-r-c-img">
// 								<a href="#">
// 							<img src="${v.brandLogoUrl}">

// 								</a>
// 							</div>
// 									`
// 					).join('');
// 					$('#pinPai .pP-s-r-cont').html(html);
// 				})

// 				break;
// 			case 3:
// 				$.get(showBrandByStyle, {

// 				}, res => {
// 					console.log(res.info);
// 					let html = res.info.map(v =>
// 						`
// 							<div class="pP-s-r-c-img">
// 								<a href="#">
// 							<img src="${v.brandLogoUrl}">

// 								</a>
// 							</div>
// 										`
// 					).join('');
// 					$('#pinPai .pP-s-r-cont').html(html);
// 				})

// 				break;
// 			case 4:
// 				$.get(showBrandByArea, {

// 				}, res => {
// 					console.log(res.info);
// 					let html = res.info.map(v =>
// 						`
// 							<div class="pP-s-r-c-img">
// 								<a href="#">
// 							<img src="${v.brandLogoUrl}">

// 								</a>
// 							</div>
// 											`
// 					).join('');
// 					$('#pinPai .pP-s-r-cont').html(html);
// 				})

// 				break;
// 			default:
// 				break;
// 		}
// 	});

// }
/* 品牌馆页面 */
function pinPaiStyle() {
 //	console.log($('.pinPai li').eq(0));
 $('.pinPai  li')
  .eq(0)
  .css({
   color: '#010101',
   'font-size': '0.26rem',
   'border-left': '0.10rem solid #101010',
  })
  .siblings()
  .css({
   'font-size': '0.23rem',
   color: '#999',
   'border-left': '0',
  });
 $('.pinPai  li').click(function() {
  console.log($(this).index());

  $(this)
   .css({
    'font-size': '0.26rem',
    color: '#010101',
    'border-left': '0.10rem solid #101010',
   })
   .siblings()
   .css({
    'font-size': '0.23rem',
    color: '#999',
    'border-left': '0',
   });

  /* 根据点击的类别请求不同的数据,并显示到页面上 */
  switch ($(this).index()) {
   /* 热门品牌 */
   case 0:
    $.get(showBrandByPopular, {}, res => {
     console.log(res.info);
     let html = res.info
      .map(
       v =>
        `
						<div class="pP-s-r-c-img">
							<a href="jump.html?brandId=${v.brandId}">
							<img src="${v.brandLogoUrl}">
						
							</a>
						</div>
						`
      )
      .join('');
     $('#pinPai .pP-s-r-cont').html(html);
    });
    break;

   /* A-Z */
   case 1:
    $.get(findAllBrand, {}, res => {
     console.log(res.info);
     let html = res.info
      .map(
       v =>
        `<a href="jump.html?brandId=${v.brandId}">
							<div class="pP-s-r-c-img">
								
							<img src="${v.brandLogoUrl}">
								
								
							</div></a>
							`
      )
      .join('');
     $('#pinPai .pP-s-r-cont').html(html);
    });
    break;

   /* 需要对商品进行分类 */
   /* 按分类 */
   case 2:
    $.get(showBrandByCategory, {}, res => {
     console.log(res.info);
     let obj = res.info;
     let html1 = obj
      .map(
       v =>
        `<div class="pP-s-r-title">
								<span></span>
								<p>${v.categoryName}</p>
								<span></span>
							</div>
							<div class="pP-s-r-c-c">
							
							</div>
								`
      )
      .join('');

     $('.pP-s-r-cont').html(html1);
     let cont = document.querySelectorAll('.pP-s-r-c-c');
     // console.log(cont.length);
     // console.log(obj[0])
     // console.log(obj[0].brands)
     for (let i = 0; i < cont.length; i++) {
      for (let j = 0; j < obj[i].brands.length; j++) {
       cont[i].innerHTML += `
							<a href="jump.html">
							<dl>
								<dt>
									<img src="${obj[i].brands[j].brandLogoUrl}" alt="">
								</dt>
								<dd>
									<p>${obj[i].brands[j].brandName}</p>
								</dd>
							</dl>	
							</a>				
							`;
      }
     }
    });

    break;

   /* 按风格 */
   case 3:
    $.get(showBrandByStyle, {}, res => {
     console.log(res.info);
     let obj = res.info;
     let html1 = obj
      .map(
       v =>
        `<div class="pP-s-r-title">
								<span></span>
								<p>${v.styleName}</p>
								<span></span>
							</div>
							<div class="pP-s-r-c-c">
							
							</div>
								`
      )
      .join('');

     $('.pP-s-r-cont').html(html1);
     let cont = document.querySelectorAll('.pP-s-r-c-c');

     for (let i = 0; i < cont.length; i++) {
      for (let j = 0; j < obj[i].brands.length; j++) {
       cont[i].innerHTML += `
							<a href="jump.html?$styleId={v.styleId}">
							<dl>
								<dt>
									<img src="${obj[i].brands[j].brandLogoUrl}" alt="">
								</dt>
								<dd>
									<p>${obj[i].brands[j].brandName}</p>
								</dd>
							</dl>	
							</a>				
							`;
      }
     }
    });

    break;
   /* 按地区 */
   case 4:
    $.get(showBrandByArea, {}, res => {
     console.log(res.info);
     let obj = res.info;
     let html1 = obj
      .map(
       v =>
        `<div class="pP-s-r-title">
								<span></span>
								<p>${v.areaName}</p>
								<span></span>
							</div>
							<div class="pP-s-r-c-c">
							
							</div>
								`
      )
      .join('');

     $('.pP-s-r-cont').html(html1);
     let cont = document.querySelectorAll('.pP-s-r-c-c');
     for (let i = 0; i < cont.length; i++) {
      for (let j = 0; j < obj[i].brands.length; j++) {
       cont[i].innerHTML += `
							<a href="jump.html?areaId=${v.areaId}">
							<dl>
								<dt>
									<img src="${obj[i].brands[j].brandLogoUrl}" alt="">
								</dt>
								<dd>
									<p>${obj[i].brands[j].brandName}</p>
								</dd>
							</dl>	
							</a>				
							`;
      }
     }
    });

    break;
   default:
    break;
  }
 });
}
